import React, { FC } from "react";
import './QuestionCard.css'

type propsType = {
  id: string;
  title: string;
  isPublish: boolean;
  del: (id: string) => void;
  publish: (id: string) => void;
};

const QuestionCard: FC<propsType> = (props) => {
  const { id, title, isPublish, del, publish } = props;
  return (
    <div key={id} className="list-item">
      <strong>{title}</strong>
      &nbsp;
      {isPublish ? (
        <span style={{ color: "red" }}>已发布</span>
      ) : (
        <span style={{ color: "green" }}>未发布</span>
      )}
      &nbsp;
      <button onClick={() => publish(id)}>{isPublish ? "取消发布" : "发布问卷"}</button>
      &nbsp;
      <button onClick={() => del(id)}>删除</button>
    </div>
  );
};

export default QuestionCard;
